<template>
  <el-dialog
   :visible.sync="visible"
    width="680px"
    title="数据回溯参数设置"
    :close-on-click-modal="false"
    :modal-append-to-body="true"
    @close="onClose"
  >
    <el-row v-if="activeData.backtrack" style="margin-bottom: 15px;">
      <label style="display: inline-block; width: 100px; text-align: right;">选择回溯配置：</label>
      <el-select 
        v-model="activeData.backtrack.backtrackId" 
        placeholder="请选择回溯配置"
        clearable
        @change="handleBacktrackChange"
      >      
        <el-option
          v-for="(item, index) in backtrackList"
          :key="index"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </el-row>
    <el-row v-if="activeData.backtrack.backtrackId" style="margin-bottom: 15px;">
      <label style="display: inline-block; width: 100px; text-align: right;">默认步骤：</label>
      <el-select 
        v-model="activeData.backtrack.stepId" 
        placeholder="请选择默认步骤"
        clearable
        @change="handleStepChange"
      >      
        <el-option
          v-for="(item, index) in stepList"
          :key="index"
          :label="item.title"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </el-row>
    <el-row v-if="activeData.backtrack.backtrackId" style="margin-bottom: 15px;">
      <el-row v-for="(item, index) in activeData.backtrack.backtrackParams" :key="index" style="margin-bottom: 15px;">
        <label style="display: inline-block; width: 100px; text-align: right;">参数名：</label>
        <el-input v-model="item.param" placeholder="请输入参数名" style="width: 197px;"></el-input>
        &nbsp;=&nbsp;
        <label>列名：</label>
        <el-select 
          v-model="item.column" 
          placeholder="请选择列名"
          clearable
        >      
          <el-option
            v-for="(column, i) in activeData.columns"
            :key="i"
            :label="column.label"
            :value="column.prop"
          >
          </el-option>
        </el-select>
        &nbsp;&nbsp;
        <el-button type="danger" size="mini" circle icon="el-icon-delete" title="删除" @click="handleRemoveParam(item, index)"></el-button>
      </el-row>
      <el-row style="text-align: center;">
        <el-button
          icon="el-icon-circle-plus-outline"
          type="text"
          @click="handleAddParam"
        >
          添加参数
        </el-button>
      </el-row>
    </el-row>
    <div slot="footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="handelConfirm">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
// import { tableColumnConf } from '@/views/workflow/components/generator/config'
export default {
  components: {
    
  },
  data() {
    return {
      backtrackList: [],
      stepList: [],
      activeData: {
        backtrack: {}
      },
      visible: false,
    }
  },
  watch: {
    
  },
  mounted() {
    this.getBacktrackList()
  },
  methods: {
    /**
     * 显示设置回溯的窗口
     * @param {Array} activeData 当前组件的数据
     * @returns {void}
     */
    show(activeData) {
      activeData.backtrack = activeData.backtrack || {
        isBacktrack: true, // 是否可回溯
        backtrackId: '', // 回溯配置的Id
        stepId: '', // 默认回溯的步骤Id
        backtrackParams: [], // 查看数据回溯传递的公共参数
      }
      this.activeData = activeData
      this.visible = true
    },
    getBacktrackList() {
      this.backtrackList = [
        {id: 1, name: '采购流程回溯'},
        {id: 2, name: '请假流程回溯'},
      ]
    },
    handleBacktrackChange(value) {
      if (value == 1) {
        this.stepList = [
          {id: 1, title: '步骤1'},
          {id: 2, title: '步骤2'}
        ]
      } else {
        this.stepList = [
          {id: 'a', title: '步骤a'},
          {id: 'b', title: '步骤b'}
        ]
      }
    },
    handleStepChange(value) {
      if (value == 1) {
        this.activeData.backtrack.backtrackParams = [
          {param: 1, column: 'a'},
          {param: 2, column: 'b'}
        ]
      } else {
        this.activeData.backtrack.backtrackParams = [
          {param: 'a', column: 'a'},
          {param: 'b', column: 'b'}
        ]
      }
    },
    handleAddParam() {
      const item = { param: '', column: '' }
      this.activeData.backtrack.backtrackParams.push(item)
    },
    handleRemoveParam(item, index) {
      this.activeData.backtrack.backtrackParams.splice(index, 1)
    },
    onClose() {},
    close(e) {
      this.$emit('update:visible', false)
    },
    handelConfirm() {
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
  
.select-item {
  display: flex;
  border: 1px dashed #fff;
  box-sizing: border-box;
  & .close-btn {
    cursor: pointer;
    color: #f56c6c;
  }
  & .el-input + .el-input {
    margin-left: 4px;
  }
}
.select-item + .select-item {
  margin-top: 4px;
}
.select-item.sortable-chosen {
  border: 1px dashed #409eff;
}
.select-line-icon {
  line-height: 32px;
  font-size: 22px;
  padding: 0 4px;
  color: #777;
  cursor: pointer;
}
.option-drag {
  cursor: move;
}
</style>
